<script setup></script>

<template>
  <svg width="200px" height="200px">
    <!-- Wave -->

    <g>
      <path fill="rgba(154, 205, 50, .8)" d="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z">
        <animate
          dur="4s"
          repeatCount="indefinite"
          attributeName="d"
          attributeType="XML"
          values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"
        ></animate>
      </path>
    </g>

    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>

    <circle
      cx="100"
      cy="100"
      r="90"
      stroke-width="20"
      stroke="yellowgreen"
      fill="none"
      class="percentage-pie-svg"
    ></circle>
  </svg>
</template>

<style lang="css" module>
.wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
<style lang="css">
/* 环形进度条 */
</style>
